<script setup lang="ts">
import { computed, Ref } from 'vue'
import type { CurrentProduct } from '@/basePackage/pages/customerService/types'
import useConvert from '@/composables/useConvert'

const $props = defineProps({
    msg: { type: String, required: true },
    isMine: { type: Boolean, required: true },
    shopId: { type: String, required: true },
})
const { divTenThousand } = useConvert()
const product: Ref<CurrentProduct> = computed(() => {
    const productMsg = $props.msg
    if (!productMsg) {
        return { id: '', name: '未正确获取商品信息', salePrices: [], pic: '' }
    }
    return JSON.parse(productMsg)
})

const navToProductInfo = () => {
    if (!product.value.id || !$props.shopId) return
    uni.navigateTo({
        url: `/basePackage/pages/commodityInfo/InfoEntrance?goodId=${product.value.id}&shopId=${$props.shopId}`,
    })
}
</script>

<template>
    <view class="product" :class="$props.isMine ? '' : 'product-consumer'" @click="navToProductInfo">
        <view class="product__image">
            <u-image width="100%" height="300rpx" border-radius="14" :src="product.pic" mode="widthFix" />
        </view>
        <view class="product__info">
            <text class="product__info--name">{{ product.name ? product.name : '未正确获取商品信息' }}</text>
            <text class="product__info--price">
                {{
                    product.price?.estimate
                        ? `¥${divTenThousand(product.price.estimate).toFixed(2)}${product.price.estimate?.includes?.('~') ? '' : '起'}`
                        : ''
                }}
            </text>
        </view>
    </view>
</template>

<style scoped lang="scss">
@include b(product) {
    margin: 20rpx;
    padding: 20rpx;
    border: 5rpx solid $content-bg;
    background: $content-bg;
    border-radius: 15rpx;
    @include e(image) {
        width: 450rpx;
        margin: 0 auto;
    }
    @include e(info) {
        margin-top: 20rpx;
        @include flex;
        @include m(name) {
            width: 60%;
            font-size: 28rpx;
            font-weight: 700;
            @include utils-ellipsis(2);
        }
        @include m(price) {
            flex: 1;
            font-size: 28rpx;
            font-weight: 700;
            text-align: right;
            color: red;
            @include utils-ellipsis(2);
        }
    }
}
@include b(product-consumer) {
    border: 5rpx solid $content-bg;
    background: $content-bg;
}
</style>
